<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#address{
				color: blue;
			}
		</style>
		<script type="text/javascript">
			var area_doc;
			var second_doc;
			var ids=[];
			var tags=[
				"province",
				"city",
				"county",
				"town",
				"village"
			]
			var info=[];
			var tips={
				province:"请选择省:",
				city:"请选择市:",
				county:"请选择县/区:",
				town:"请选择镇/街道:",
				village:"请选择乡/村:"
			}
			var divs=[];
			function update(){
				var arr=[];
				for (var i = 0; i < divs.length; i++) {
					select = divs[i].querySelector("select");
					arr[i] =select.options[select.selectedIndex].text;
				}
				document.getElementById("address").innerHTML="你的地址是:"+arr.join("-");
			}
			function createSelect(parent,doc,index,id){
				var select = document.createElement("select");
				var div = document.createElement("div");
				var ops=[];
				var tag = tags[index];
				if(id){
					ops = doc.getElementById(id).querySelectorAll(tag);
				}else{
					ops = doc.querySelectorAll(tag);
				}
				if(divs[index] && divs[index].parentNode){	
					divs[index].parentNode.removeChild(divs[index]);
				}
 				if(!ops.length){
					return null;
				}
				for (var i = 0; i < ops.length; i++) {
					select.options[i] = new Option(ops[i].getAttribute("name"));
				}
				div.innerHTML = tips[tag];
				div.appendChild(select);
				parent.appendChild(div);
				divs[index] = div;
				select.setAttribute("onchange","change_action('"+index+"')");
				divs.length=index+1;
				return select;
			}
			function change_action(index,target){
				var select;
				var id;
				if(target==undefined){
					target = event.target;
				}
				update();
				if(index==0){
					var xhr = new XMLHttpRequest();
					id = area_doc.querySelectorAll(tags[index])[target.selectedIndex].getAttribute("id");
					xhr.open("get","area/"+id+".xml",true); //异步
					xhr.send();
					xhr.onreadystatechange=function(){
						if(xhr.readyState==4 && xhr.status==200)
						{
							second_doc = xhr.responseXML;
							select = createSelect(divs[index],second_doc,Number(index)+1);
							var cur = second_doc.getElementById(id);
							info[index]={
								name:cur.getAttribute("name"),
								id:id
							};
							change_action(Number(index)+1,select);
						}
					};
				}else{
					var last = second_doc.getElementById(info[index-1].id);
					var arr = last.querySelectorAll(tags[index]);
					if(arr.length<=0){
						return;
					}
					var cur = arr[target.selectedIndex];
					info[index]={
						name:cur.getAttribute("name"),
						id:cur.getAttribute("id")
					};
					select = createSelect(divs[index],second_doc,Number(index)+1,cur.getAttribute("id"));
					change_action(Number(index)+1,select);
				}
			}
			function init(){
				var xhr = new XMLHttpRequest();
				xhr.open("get","area/area.xml",true); //异步
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4 && xhr.status==200)
					{
						area_doc = xhr.responseXML;
						var select= createSelect(document.getElementById("se"),area_doc,0);
						change_action(0,select);
					}
				};
			}
		</script>
	</head>
	<body onload="init()">
		<div id="se">
			
		</div>
		<div id="address">
			你的地址是:
		</div>
	</body>
</html>
